<template>
  <div class="resume-parse">
    <div style="margin-top:2rem;margin-bottom:2rem;">
      <el-row>
        <el-col :span="4">
          <el-input v-model="q.name" placeholder="姓名、职位等关键词" clearable @keyup.enter.native="getData"></el-input>
        </el-col>
        <el-col :span="4" >
          <el-select v-model="q.status" placeholder="状态" clearable>
              <el-option label="失败" value="-1"></el-option>
              <el-option label="成功" value="1"></el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"  @click="refresh">搜索</el-button>
        </el-col>
        <el-col :span="2" :offset="10">
          <el-button type="primary" @click="dialogVisible = true">解析</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="id">
      </el-table-column>
      <el-table-column prop="filename" label="文件">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="150">
        <template slot-scope="scope">
         <el-tag v-if="scope.row.status==0"
          type="primary"
          disable-transitions>解析中</el-tag>
          <el-tag v-if="scope.row.status==1"
          type="success"
          disable-transitions>成功</el-tag>
          <el-tag v-if="scope.row.status==-1"
          type="danger"
          disable-transitions>失败</el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="uploadTime" label="上传时间">
      </el-table-column>
      <el-table-column prop="errorMsgShort" width="200" label="错误信息">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==-1" @click="showDetail(scope.row)" type="text" size="small">详情</el-button>
          <el-button v-if="scope.row.status==-1" @click="reParse(scope.row)" type="text" size="small">再次解析</el-button>
          <el-button v-if="scope.row.status==-1" @click="download(scope.row)" type="text" size="small">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--上传文件-->
    <el-dialog title="选择文件" :visible.sync="dialogVisible" width="30%">
      <el-upload drag :action="url" :show-file-list="false" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip"><span>支持格式&nbsp;.doc&nbsp;.docx&nbsp;.pdf&nbsp;.eml&nbsp;.json&nbsp;.zip&nbsp;</span>
        </div>
      </el-upload>
    </el-dialog>
    <!--失败原因-->
    <el-dialog title="失败原因" :visible.sync="detailDialogVisible" width="70%">
      <div v-html="errorMsg"></div>
    </el-dialog>
    <div style="margint-top:2rem;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page"
        :page-sizes="[10, 20, 30, 50]" :page-size="q.limit" layout="total, sizes, prev, pager, next, jumper"
        :total="q.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  export default {
    data() {
      return {
        q: {
          page: 1,
          limit: 10,
          total: 0,
          name:"",
          status:""
        },
        url: window.SITE_CONFIG['baseUrl'] + '/parse/upload?&token=' + this.$cookie.get('token'),
        //上传对话框
        dialogVisible: false,
        //失败原因对话框
        detailDialogVisible:false,
        errorMsg:'',//错误信息
        tableData: []
      }
    },
    created() {
      this.getData()
    },
    mounted(){
      this.getData()
    },
    methods: {
      //上传成功后执行
      handleAvatarSuccess(res, file) {
        if (res.code == 0) {
          this.$message({
            message: '上传成功',
            type: 'success'
          });
          this.getData()
        } else {
          this.$message({
            message: '上传失败:' + res.msg,
            type: 'error'
          });
        }

      },
      //上传前执行
      beforeAvatarUpload(file) {
        let filename = file.name
        let status = true;
        if (filename.endsWith('zip') || filename.endsWith('doc') || filename.endsWith('docx') || filename.endsWith(
            'pdf') || filename.endsWith('eml') || filename.endsWith('json') )  {
          status = true;
        } else {
          status = false;
          this.$message({
            message: '格式不正确',
            type: 'error'
          });
        }
        return status;
      },
      //获取列表
      getData() {
        this.$http({
          url: `${this.$http.adornUrl('/parse/list?token='+this.$cookie.get('token') )}`,
          method: 'get',
          params: this.$http.adornParams({
            'page': this.q.page,
            'limit': this.q.limit,
            'name':this.q.name,
            'status':this.q.status
          })
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            this.q.total=data.page.total
            console.log(data)
            this.tableData=data.page.records
          } else {
            this.$message({
              message: '数据获取错误',
              type: 'error'
            });
          }
        })
      },
      //刷新
      refresh(){
        this.q.page=1
        this.getData()
      },
      //下载
      download(row){
        let url = window.SITE_CONFIG['baseUrl'] + "/parse/download?id=" + row.id + '&token=' + this.$cookie.get(
          'token')
        window.open(url, '_blank')
      },
      //重新解析
      reParse(row){
        let id = row.id
        this.$http({
          url: `${this.$http.adornUrl('/parse/reParse/'+id+'?token='+this.$cookie.get('token') )}`,
          method: 'put'
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            this.$message({
              message: '解析完成',
              type: 'success'
            });
            this.getData()
          } else {
            this.$message({
              message: '解析完成',
              type: 'error'
            });
          }
        })
      },
      //查看失败原因
      showDetail(row){
        let rowData = _.cloneDeep(row)
        this.detailDialogVisible = true
        let msg = rowData.errorMsg==null?"":rowData.errorMsg
        this.errorMsg = msg.replace("\n","</br>")
      },
      handleSizeChange(val) {
        this.q.limit=val
        this.getData()
      },
      handleCurrentChange(val) {
        this.q.page=val
        this.getData()
      },
      formatStatus(row, cpl, val) {
        if (val == 0) {
          return '解析中'
        } else if (val == 1) {
          return "完成"
        } else if (val == -1) {
          return '失败'
        }
      }

    }

  }

</script>
